<template>
  <div class="tab-bar" v-if="tabBarShow">
    <div class="tab-bar-fixed">
      <div :class="`item-box ${tabBarIndex === index ? 'active' : ''}`" v-for="(item,index) in tabBarList" :key="index" @click="handleClick(item)">
        <i :class="`iconfont ${item.icon} item-icon`"></i>
        <span class="item-name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
interface tabBarInstanceof{
    name: string,
    icon: string,
    path: string
}

import { defineComponent,watch,ref,Ref } from "vue";
import {useRoute} from 'vue-router'
import router from "../config/router";
export default defineComponent({
    setup(){

      // tabBar数据
      const tabBarList: Array<tabBarInstanceof> = [
        {name: '首页',icon: 'icon-home', path: '/'},
        {name: '分类',icon: 'icon-fenlei',path: '/cat'},
        {name: '购物车',icon: 'icon-gouwuche',path: '/shopping-cart'},
        {name: '我的',icon: 'icon-wode',path: '/personal'},
      ]

      // 监听路由变化
      const route = useRoute();  
      let tabBarIndex:Ref<number> = ref(0);
      let tabBarShow: Ref<boolean> = ref(false);
      watch(() => route,() => {
          tabBarList.forEach((item,index) => {
              if(item.path === route.path) tabBarIndex.value = index;
          })

          tabBarShow.value = <boolean>route.meta.tabBar;
      },{
          deep: true,
          immediate: true
      })

      // tabBar点击事件  
      const handleClick = (item: tabBarInstanceof):void => {
          router.push({
            path: item.path
          })
      }

      return {
        tabBarList,
        tabBarIndex,
        tabBarShow,
        handleClick
      }
    }
})
</script>

<style lang="less" scoped>
.tab-bar {
    height: 1.25rem;
    width: 100%;

    .tab-bar-fixed {
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.25rem;
        background-color: #fff;
        border-top: 1px solid #ddd;

        .item-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #555;
        }

        .item-icon {
            font-size: .5625rem;
        }

        .item-name {
            font-size: .3125rem;
        }

        .active {
            color: @base-color;
        }
    }
}
</style>